<script lang="ts" setup>
import { pageSearchUserInfo } from '@/api/login/UserManageApi';
import { UserInfoPageSearchDto } from '@/models/dtos/adminUser/userinfo/UserInfoSearchDto';
import { UserInfoListVo } from '@/models/vos/userInfo/UserInfoListVo';
import { inject, onMounted, reactive, ref, Ref } from 'vue';
import { useRouter } from 'vue-router';
import { formatTimestamp } from '@/utils/format';
import { showConfirmDialog } from 'vant';
import { EnumStatus } from '@/models/enums/EnumStatus';
import { disableUser, enableUser } from '@/api/userInfo/UserInfoApi';
import { it } from 'node:test';

const router = useRouter();

var showNavbar = inject("showNavbar") as Ref<boolean>;
showNavbar.value = false;

const historyBack = () => {
    router.push({ path: "/" });
};
const toAddUser = () => {
    router.push({ path: "/user/adduser" });
};
const searchForm = reactive(new UserInfoPageSearchDto())
const valieOption = [
    { text: '福利', value: -1 },
    { text: '福利中', value: 1 },
    { text: '已过期', value: 0 },
];
const statusOption = [
    { text: '状态', value: -1 },
    { text: '有效', value: 1 },
    { text: '无效', value: 0 },
];

let finished = ref(false);
var userList: UserInfoListVo[] = reactive([]);

const searchUserList = async () => {
    userList.splice(0, userList.length);
    await loadUserList();
};

const loadUserList = async () => {
    if (!loading.value) {
        loading.value = true;
        var pageResult = await pageSearchUserInfo(searchForm); 1
        searchForm.pageIndex = pageResult.pageIndex;
        searchForm.pageCount = pageResult.pageCount;
        searchForm.totalCount = pageResult.totalCount;
        if (pageResult.itemList && pageResult.itemList.length > 0) {
            userList.splice(userList.length - 1, 0, ...pageResult.itemList);
        }

        loading.value = false;

        if (searchForm.pageIndex >= searchForm.pageCount) {
            finished.value = true;
        }
        else {
            finished.value = false;
        }
    }
    else {
        console.log("重复点击");
    }
}

onMounted(() => {
    searchUserList();
});

const loading = ref(false);
const onLoadData = () => {
    searchForm.pageIndex++;
    loadUserList();
};
const onRefresh = () => {
    searchForm.pageIndex = 1;
    finished.value = false;
    loading.value = false;
    searchUserList();
};

const toEdit = (id: string) => {
    router.push({ path: '/user/adduser', query: { id } })
};

const disableUserHandle = async (id: string) => {
    await disableUser(id);
    await searchUserList();
};
const enableUserHandle = async (id: string) => {
    await enableUser(id);
    await searchUserList();
};

</script>

<template>
    <van-nav-bar left-text="返回" right-text="新增" title="用户管理" left-arrow @click-left="historyBack"
        @click-right="toAddUser" />
    <van-search v-model="searchForm.keyword" placeholder="请输入搜索关键词" :show-action="true">
        <template #action>
            <div @click="searchUserList">搜索</div>
        </template>
    </van-search>
    <van-dropdown-menu>
        <van-dropdown-item v-model="searchForm.valid" :options="valieOption" />
        <van-dropdown-item v-model="searchForm.status" :options="statusOption" />
    </van-dropdown-menu>
    <van-row class="list-title" justify="space-around" align="center">
        <van-col :span="7">
            用户名
        </van-col>
        <van-col :span="4">
            产品数
        </van-col>
        <van-col :span="4">
            状态
        </van-col>
        <van-col :span="9">
            操作
        </van-col>
    </van-row>
    <van-checkbox-group ref="checkboxGroup">
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <van-list :loading="loading" :finished="finished" finished-text="无更多数据！" @load="onLoadData">
                <van-cell v-for="(item, idx) in userList">
                    <van-row justify="space-between" align="center">
                        <van-col class="list-item sp" :span="7">{{ item.userName }}</van-col>
                        <van-col class="list-item sp" :span="4">

                            <van-popover class="pitem-popover">
                                <van-row class="plist-title" justify="space-between" align="center">
                                    <van-col :span="10">产品</van-col>
                                    <van-col :span="10">有效期</van-col>
                                </van-row>
                                <van-row v-for="(pitem, idx) in item.products" class="plist-item"
                                    justify="space-between" align="center">
                                    <van-col :span="10">{{ pitem.productName }}</van-col>
                                    <van-col :span="10">{{ formatTimestamp(pitem.validTime) }}</van-col>
                                </van-row>
                                <template #reference>
                                    <van-button plain type="primary">{{ item.products.filter(it => parseInt(it.validTime)
                                        > ( new Date().valueOf()/1000)).length }}</van-button>
                                </template>

                            </van-popover>

                        </van-col>
                        <van-col :span="4">
                            <van-tag color="#06d050" v-if="item.status == EnumStatus.Enable">有效</van-tag>
                            <van-tag color="#cf2506" v-if="item.status == EnumStatus.Disable">无效</van-tag>
                        </van-col>
                        <van-col :span="9">
                            <van-icon name="edit" class="item-operate-icon" size="24" @click.stop="toEdit(item.id)" />
                            <van-icon name="play-circle-o" class="item-operate-icon" size="24"
                                v-if="item.status == EnumStatus.Disable" @click="enableUserHandle(item.id)" />
                            <van-icon name="pause-circle-o" class="item-operate-icon" size="24"
                                v-if="item.status == EnumStatus.Enable" @click="disableUserHandle(item.id)" />
                        </van-col>
                    </van-row>
                </van-cell>
            </van-list>

        </van-pull-refresh>
    </van-checkbox-group>

</template>

<style lang="scss" scoped>
.list-title {
    font-size: 16px;
    text-align: center;
    height: 50px;
    line-height: 50px;
}

.list-item {
    text-align: center;
}

.item-operate-icon {
    margin: 0 5px;
    size: 12px;
}

.pitem-popover {
    font-size: 18px;
    text-align: center;
    width: 250px;

    .plist-title {
        font-weight: bolder;
        margin: 10px;
        padding: 5px;
    }

    .plist-item {
        font-size: 16px;
        margin: 10px;
        padding: 5px;
        border-top: 1px solid #ededed;
    }
}
</style>